<template>
  <div class="post-job-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">
            <i class="el-icon-plus"></i>
            发布勤工助学岗位
          </h1>
          <p class="page-subtitle">为学生提供优质的勤工助学机会</p>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <el-row :gutter="24">
        <!-- 左侧表单 -->
        <el-col :span="16">
          <el-card class="form-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">
                  <i class="el-icon-edit"></i>
                  岗位信息
                </span>
                <el-tag type="success" size="small">必填项已标记</el-tag>
              </div>
            </template>
            
            <el-form 
              :model="form" 
              :rules="rules" 
              ref="formRef" 
              label-width="120px" 
              class="post-job-form"
              :label-position="'top'"
            >
              <!-- 基本信息 -->
              <div class="form-section">
                <h3 class="section-title">
                  <i class="el-icon-info"></i>
                  基本信息
                </h3>
                
        <el-form-item label="岗位名称" prop="name">
                  <el-input 
                    v-model="form.name" 
                    placeholder="请输入岗位名称，如：图书馆管理员" 
                    maxlength="20" 
                    show-word-limit
                    clearable
                  >
                    <template #prefix>
                      <i class="el-icon-office-building"></i>
                    </template>
                  </el-input>
        </el-form-item>

        <el-form-item label="工作内容" prop="description">
                  <el-input 
                    type="textarea" 
                    v-model="form.description" 
                    placeholder="请详细描述工作内容、职责和要求..." 
                    :rows="4"
                    maxlength="200" 
                    show-word-limit
                    resize="none"
                  />
        </el-form-item>
              </div>

              <!-- 工作详情 -->
              <div class="form-section">
                <h3 class="section-title">
                  <i class="el-icon-location"></i>
                  工作详情
                </h3>
                
                <el-row :gutter="20">
                  <el-col :span="12">
        <el-form-item label="工作地点" prop="location">
                      <el-input 
                        v-model="form.location" 
                        placeholder="如：图书馆三楼阅览室" 
                        maxlength="50"
                        clearable
                      >
                        <template #prefix>
                          <i class="el-icon-location-information"></i>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="工作时间" prop="time">
                      <el-input 
                        v-model="form.time" 
                        placeholder="如：周一至周五 9:00-17:00" 
                        maxlength="50"
                        clearable
                      >
                        <template #prefix>
                          <i class="el-icon-time"></i>
                        </template>
                      </el-input>
        </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <!-- 薪资待遇 -->
              <div class="form-section">
                <h3 class="section-title">
                  <i class="el-icon-money"></i>
                  薪资待遇
                </h3>
                
        <el-form-item label="薪资标准" prop="salary">
                  <el-input-number 
                    v-model="form.salary" 
                    :min="1" 
                    :max="1000" 
                    placeholder="元/小时"
                    style="width: 200px"
                    :precision="0"
                  />
                  <div class="unit-text">元/小时</div>
        </el-form-item>
              </div>

              <!-- 岗位状态 -->
              <div class="form-section">
                <h3 class="section-title">
                  <i class="el-icon-setting"></i>
                  岗位状态
                </h3>
                
        <el-form-item label="岗位状态" prop="status">
          <el-radio-group v-model="form.status">
                    <el-radio :label="0">
                      <i class="el-icon-check"></i>
                      可申请
                    </el-radio>
                    <el-radio :label="1">
                      <i class="el-icon-close"></i>
                      不可申请
                    </el-radio>
          </el-radio-group>
        </el-form-item>
              </div>

              <!-- 操作按钮 -->
              <div class="form-actions">
                <el-button type="primary" @click="onSubmit" :loading="submitting" size="large">
                  <i class="el-icon-check"></i>
                  发布岗位
                </el-button>
                <el-button @click="onReset" size="large">
                  <i class="el-icon-refresh"></i>
                  重置表单
                </el-button>
              </div>
      </el-form>
    </el-card>
        </el-col>

        <!-- 右侧预览 -->
        <el-col :span="8">
          <div class="preview-section">
            <el-card class="preview-card" shadow="hover">
              <template #header>
                <div class="card-header">
                  <span class="card-title">
                    <i class="el-icon-view"></i>
                    岗位预览
                  </span>
                </div>
              </template>
              
              <div class="preview-content" v-if="form.name">
                <div class="preview-item">
                  <h4>{{ form.name }}</h4>
                  <p class="preview-desc">{{ form.description || '暂无描述' }}</p>
                </div>
                
                <div class="preview-details">
                  <div class="detail-item">
                    <i class="el-icon-location"></i>
                    <span>{{ form.location || '待填写' }}</span>
                  </div>
                  <div class="detail-item">
                    <i class="el-icon-time"></i>
                    <span>{{ form.time || '待填写' }}</span>
                  </div>
                  <div class="detail-item">
                    <i class="el-icon-money"></i>
                    <span>{{ form.salary ? `${form.salary}元/小时` : '待填写' }}</span>
                  </div>
                  <div class="detail-item">
                    <i class="el-icon-circle-check" v-if="form.status === 0"></i>
                    <i class="el-icon-circle-close" v-else></i>
                    <span>{{ form.status === 0 ? '可申请' : '不可申请' }}</span>
                  </div>
                </div>
              </div>
              
              <div class="preview-empty" v-else>
                <i class="el-icon-edit-outline"></i>
                <p>填写左侧表单查看预览效果</p>
              </div>
            </el-card>

            <!-- 发布提示 -->
            <el-card class="tips-card" shadow="hover">
              <template #header>
                <div class="card-header">
                  <span class="card-title">
                    <i class="el-icon-info"></i>
                    发布提示
                  </span>
                </div>
              </template>
              
              <div class="tips-content">
                <div class="tip-item">
                  <i class="el-icon-check"></i>
                  <span>请确保信息真实准确，避免虚假宣传</span>
                </div>
<!--                <div class="tip-item">-->
<!--                  <i class="el-icon-check"></i>-->
<!--                  <span>岗位发布后不可修改，如需调整请联系管理员</span>-->
<!--                </div>-->
                <div class="tip-item">
                  <i class="el-icon-check"></i>
                  <span>建议及时处理学生申请</span>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { View } from '@element-plus/icons-vue'
import request from '@/utils/request'

const formRef = ref()
const submitting = ref(false)

const form = reactive({
  name: '',
  description: '',
  location: '',
  salary: null,
  time: '',
  status: 0
})

const rules = {
  name: [
    { required: true, message: '请输入岗位名称', trigger: 'blur' },
    { max: 20, message: '岗位名称不超过20个字符', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入工作内容', trigger: 'blur' },
    { max: 200, message: '工作内容不超过200个字符', trigger: 'blur' }
  ],
  location: [
    { required: true, message: '请输入工作地点', trigger: 'blur' },
    { max: 50, message: '工作地点不超过50个字符', trigger: 'blur' }
  ],
  salary: [
    { required: true, message: '请输入薪资标准', trigger: 'blur' },
    { type: 'number', min: 1, max: 1000, message: '薪资标准为1-1000元/小时', trigger: 'blur' }
  ],
  time: [
    { required: true, message: '请输入工作时间', trigger: 'blur' },
    { max: 50, message: '工作时间不超过50个字符', trigger: 'blur' }
  ],
  status: [
    { required: true, message: '请选择岗位状态', trigger: 'change' }
  ]
}

const onSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return
    try {
      submitting.value = true
      const res = await request({
        url: '/api/position/add',
        method: 'post',
        data: form
      })
      if (res.code === 0) {
        ElMessage.success('岗位发布成功')
        onReset()
      } else {
        ElMessage.error(res.msg || '岗位发布失败')
      }
    } catch (e) {
      ElMessage.error('网络错误，岗位发布失败')
    } finally {
      submitting.value = false
    }
  })
}

const onReset = () => {
  formRef.value.resetFields()
  Object.assign(form, {
    name: '',
    description: '',
    location: '',
    salary: null,
    time: '',
    status: 0
  })
}

const onPreview = () => {
  if (!form.name) {
    ElMessage.warning('请先填写岗位名称')
    return
  }
  ElMessage.info('预览功能开发中...')
}
</script>

<style scoped>
.post-job-container {
  min-height: 100vh;
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  background: #f7f8fa;
  padding: 20px;
}

.page-header {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left .page-title {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-subtitle {
  margin: 0;
  color: #7f8c8d;
  font-size: 16px;
}

.main-content {
  max-width: 1400px;
  margin: 0 auto;
}

.form-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-job-form {
  padding: 0;
}

.form-section {
  margin-bottom: 32px;
  padding: 24px;
  background: #f8f9fa;
  border-radius: 8px;
  /* border-left: 4px solid #409eff; */
}

.section-title {
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
}

.unit-text {
  margin-top: 8px;
  color: #7f8c8d;
  font-size: 14px;
  margin-left: 16px;
}

.form-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding: 32px 0;
  border-top: 1px solid #e4e7ed;
  margin-top: 32px;
}

.preview-section {
  position: sticky;
  top: 20px;
}

.preview-card, .tips-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
  background: #fff;
}

.preview-content {
  padding: 16px 0;
}

.preview-item h4 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.preview-desc {
  margin: 0 0 16px 0;
  color: #7f8c8d;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.preview-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5a6c7d;
  font-size: 14px;
}

.detail-item i {
  color: #409eff;
  width: 16px;
}

.detail-item .el-icon-circle-check {
  color: #67c23a;
}

.detail-item .el-icon-circle-close {
  color: #f56c6c;
}

.preview-empty {
  text-align: center;
  padding: 40px 20px;
  color: #c0c4cc;
}

.preview-empty i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.tips-content {
  padding: 16px 0;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  color: #5a6c7d;
  font-size: 14px;
  line-height: 1.5;
}

.tip-item i {
  color: #67c23a;
  margin-top: 2px;
  flex-shrink: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content .el-col-16 {
    width: 100%;
  }
  .main-content .el-col-8 {
    width: 100%;
    margin-top: 24px;
  }
  .preview-section {
    position: static;
  }
}

@media (max-width: 768px) {
  .post-job-container {
    padding: 12px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .form-section {
    padding: 16px;
  }
}

/* 表单样式优化 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #2c3e50;
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.1);
}

:deep(.el-textarea__inner) {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

:deep(.el-select .el-input__wrapper) {
  border-radius: 8px;
}

:deep(.el-button) {
  border-radius: 8px;
  font-weight: 500;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

:deep(.el-button--primary:hover) {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

:deep(.el-radio__label) {
  display: flex;
  align-items: center;
  gap: 4px;
}

:deep(.el-input-number) {
  border-radius: 8px;
}

:deep(.el-input-number .el-input__wrapper) {
  border-radius: 8px;
}
</style> 